<template>
  <div class="student-system">
    <header>
      <h1>学生管理系统</h1>
      <button @click="logout">退出登录</button>
    </header>

    <main>
      <!-- 个人信息部分 -->
      <div class="profile-section">
        <h2>个人信息</h2>
        <div class="profile-info">
          <p>姓名：{{ auth.currentUser?.name }}</p>
          <p>学号：{{ studentId }}</p>
          <p>院系：计算机学院</p>
        </div>
      </div>

      <!-- 课程搜索部分 -->
      <div class="search-box">
        <el-input v-model="searchKeyword" placeholder="搜索课程..." clearable @input="filterCourses" />
      </div>

      <!-- 课程列表部分 -->
      <div class="course-list">
        <h2>我的课程</h2>
        <div v-for="course in filteredCourses" :key="course.id" class="course-card">
          <h3>{{ course.name }}</h3>
          <p>授课教师：{{ course.teacher }}</p>
          <p>成绩：{{ course.grade || '暂无' }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const auth = useAuthStore()

const searchKeyword = ref('')
const studentId = computed(() => auth.currentUser?.phone.slice(-4).padStart(8, '202300'))

// 模拟课程数据
const courses = ref([
  { id: 1, name: 'Web前端开发', teacher: '张老师', grade: 85 },
  { id: 2, name: '数据库原理', teacher: '李老师', grade: 92 }
])

// 过滤后的课程列表
const filteredCourses = computed(() => {
  if (!searchKeyword.value) {
    return courses.value
  }
  return courses.value.filter(course =>
    course.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

const logout = () => {
  auth.logout()
  router.push('/login')
}
</script>

<style scoped>
.student-system {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.profile-section {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  padding: 20px;
  border-radius: 8px;
}

.search-box {
  margin-bottom: 20px;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.course-card {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: transform 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>